<!DOCTYPE html>

<head>
    <script src="fabric.min.js"></script>
    <script src="jquery-3.5.0.min.js"></script>
    <script src="heic2any.js"></script>

    <script src="index.js"></script>
</head>

<body>
    <h1>手写</h1>
    <div style="display: flex;">
        <div id="a1_edit" style="background-color: rgb(211, 211, 198);height: 300px;width: 300px;">
        </div>
        <div id="a1_show" style="margin-left: 10px;background-color: rgb(211, 211, 198);height: 150px;width: 150px;">
        </div>
    </div>
    <button onclick="drawOn()">继续绘画</button>
    <button onclick="clearLittle()">橡皮檫</button>
    <button onclick="clearAll()">清空</button>

    <h1>文本输入</h1>
    <div style="display: flex;">
        <div id="a2_edit" style="background-color: rgb(211, 211, 198);height: 300px;width: 300px;">
        </div>
        <div id="a2_show" style="margin-left: 10px;background-color: rgb(211, 211, 198);height: 150px;width: 150px;">
        </div>
    </div>

    <h1>上传图片</h1>
    <div style="display: flex;">
        <div id="a3_edit" style="background-color: rgb(211, 211, 198);height: 300px;width: 300px;">
        </div>
        <div id="a3_show" style="margin-left: 10px;background-color: rgb(211, 211, 198);height: 150px;width: 150px;">
        </div>
    </div>
    <button onclick="upImage()">点击上传图片</button>

    <h1>拍照</h1>
    <div style="display: flex;">
        <div id="a4_edit" style="background-color: rgb(211, 211, 198);height: 300px;width: 300px;">
        </div>
        <div id="a4_show" style="margin-left: 10px;background-color: rgb(211, 211, 198);height: 150px;width: 150px;">
        </div>

        <div id="a4_camera" style="margin-left: 10px;background-color: rgb(211, 211, 198);height: 250px;width: 250px;">
            <video id="player" style="width: 250px;"></video>
            <canvas id="canvas" style="display:none;"></canvas>
        </div>
    </div>
    <button onclick="cameraStart()">开始取景</button>
    <button onclick="closeCamera()">结束取景</button>
    <button onclick="cameraSave()">截图</button>
</body>

</html>